<template>
     <div class="excel">  
          <div class="excel_right"> 
                      <div class="fits"> 
                              <div>  
                                   <el-button type="primary" size="small" disabled plain>
                                        人员管理<el-icon class="el-icon--right"><Upload /></el-icon>
                                   </el-button>
                             </div>
                              <div>
                                   <el-button type="success" size="small" plain @click="CreateItem">
                                        增加一行<el-icon class="el-icon--right"><Upload /></el-icon>
                                   </el-button>
                              </div>
                              <div>
                                   <el-button type="danger" size="small" plain @click="resetFns" :disabled="!Boolean(lists.length-1)">
                                        重置列表<el-icon class="el-icon--right"><Upload /></el-icon>
                                   </el-button>
                              </div>
                      </div>
                      <div class="import">
                               <div>
                                     
                               </div>
                      </div> 
              </div>
              <div class="excel_left">
                    <div class="excel_left_layout">
                         <div class="excel_left_layout_header">
                                 <div class="header_one">序号</div>
                                 <div class="cellitem"
                                 v-for="(item,indicon) in props.Headers"
                                 :key="item"
                                 ><p>{{item}}</p> 
                                 <el-icon v-if="indicon==0"><User style="width: 1em; height: 1em;" /></el-icon>
                                 <el-icon v-if="indicon==1"><Document style="width: 1em; height: 1em;" /></el-icon>
                                 <el-icon v-if="indicon==2"><Clock style="width: 1em; height: 1em;"/></el-icon>
                                 <el-icon v-if="indicon==3"><AlarmClock style="width: 1em; height: 1em;" /></el-icon> 
                                 <el-icon v-if="indicon==4"><Finished style="width: 1em; height: 1em;" /></el-icon> 
                                 </div> 
                         </div>
                         <div class="excel_left_layout_body">
                                  
                                  <div class="list">
                                   <TransitionGroup  class="wraps" name="list" tag="div">  
                                         <div class="Listitems" 
                                         v-for="(item,index) in lists"
                                         :key="item.uid"
                                         >
                                             <div class="orders"> 
                                                       <div class="temps">
                                                            <div v-if="index==0">
                                                                 <div>{{index+1}}</div>
                                                                 <div class="noClear" style="opacity: .6;">移除</div> 
                                                            </div>
                                                            <div v-else>
                                                                 <div>{{index+1}}</div>
                                                                 <div @click="removeItems(index,item)">移除</div> 
                                                            </div>
                                                       </div>
                                             </div>
                                             <div class="item usercell">
                                                  <el-dropdown
                                                  @command="onSelectFn($event,index)"
                                                  >
                                                  <span class="el-dropdown-link">
                                                       <p>{{item.users}}</p>
                                                       <el-tag size="small" class="ml-2" :type="item.users==users[0]?'danger':'success'">{{item.users==users[0]?'组':'员'}}</el-tag>
                                                       <el-icon class="el-icon--right" style="margin:0 .5rem">
                                                         <arrow-down />
                                                       </el-icon>
                                                  </span>
                                                  <template #dropdown>
                                                     <el-dropdown-menu >
                                                       <el-dropdown-item :command="itm"
                                                         v-for="(itm,ind) in users"
                                                         :key="itm"
                                                       >
                                                            <p :class="['texts',itm==item.users?'active':'']" >{{itm}}</p>
                                                            <el-tag v-if="ind==0" size="small" class="ml-2" type="danger">组</el-tag>
                                                            <el-tag v-else size="small" class="ml-2" type="success">员</el-tag>
                                                       </el-dropdown-item> 
                                                     </el-dropdown-menu>
                                                  </template>
                                                  </el-dropdown>
                                             </div> 
                                             <div class="item textcell">
                                                  <el-input
                                                       v-model="item.textContent"
                                                       :rows="1"
                                                       type="textarea"
                                                       placeholder="親輸入内容"
                                                       />
                                             </div>
                                             <!-- 模块 -->
                                             <div class="item usercell">
                                                  <el-dropdown
                                                  @command="onSelectModeFn($event,index)"
                                                  >
                                                  <span class="el-dropdown-link">
                                                       <p class="modetest">{{item.mode.name}}</p>
                                                       <el-tag  size="small" class="ml-2" :type="item.mode.w">{{item.mode.test}}</el-tag> 
                                                       <el-icon class="el-icon--right" style="margin:0 .5rem">
                                                         <arrow-down />
                                                       </el-icon>
                                                  </span>
                                                  <template #dropdown>
                                                     <el-dropdown-menu >
                                                       <el-dropdown-item :command="itm"
                                                         v-for="(itm) in mode"
                                                         :key="itm.name"
                                                       >
                                                            <p :class="['texts',itm.name==item.mode.name?'active':'']">{{itm.name}}</p>
                                                            <el-tag  size="small" class="ml-2" :type="itm.w">{{itm.test}}</el-tag> 
                                                       </el-dropdown-item> 
                                                     </el-dropdown-menu>
                                                  </template>
                                                  </el-dropdown>
                                             </div> 
                                             <div class="item usercell">
                                                  <el-date-picker
                                                       v-model="item.startTime"
                                                       type="date"
                                                       placeholder="Pick a day" 
                                                       :size="size"
                                                  />
                                             </div>
                                             <div class="item usercell">
                                                  <el-date-picker
                                                       v-model="item.endTime"
                                                       type="date"
                                                       placeholder="Pick a day" 
                                                       :size="size"
                                                  />
                                             </div>
                                             <div class="item statucell">
                                                  <el-dropdown
                                                  @command="onSelectStatus($event,index)"
                                                  >
                                                  <span class="el-dropdown-link">
                                                       <el-tag v-if="item.status=='已完成'"  size="small" class="ml-2" type="success">已完成 <el-icon><CircleCheck /></el-icon></el-tag>
                                                       <el-tag v-else-if="item.status=='未完成'"  size="small" class="ml-2" type="danger">未完成 <el-icon><CircleCheck /></el-icon></el-tag>
                                                       <el-tag v-else="item.status=='进行中'"  size="small" class="ml-2" type="warning">进行中 <el-icon><CircleCheck /></el-icon></el-tag>
                                                       <el-icon class="el-icon--right">
                                                       <arrow-down />
                                                       </el-icon>
                                                  </span>
                                                  <template #dropdown>
                                                       <el-dropdown-menu>
                                                            <el-dropdown-item command="1"><el-tag  size="small" class="ml-2" type="success">已完成 <el-icon><CircleCheck /></el-icon></el-tag></el-dropdown-item>
                                                            <el-dropdown-item command="0"><el-tag  size="small" class="ml-2" type="danger">未完成 <el-icon><CircleClose /></el-icon></el-tag></el-dropdown-item>
                                                            <el-dropdown-item command="2"><el-tag  size="small" class="ml-2" type="warning">进行中 <el-icon><Warning /></el-icon></el-tag></el-dropdown-item> 
                                                       </el-dropdown-menu>
                                                  </template>
                                                  </el-dropdown>
                                             </div>
                                         </div> 
                                   </TransitionGroup >  
                                  </div>
                         </div>
                    </div> 
              </div> 
             
     </div>
</template>

<script setup lang="ts"> 
import endtoexcel from './js';
import {defineProps,PropType,ref} from 'vue';    
/**
 * listDate 为一个二维数组 
 * 动态分组，只能归类
 * 
 */ 
const props = defineProps({
     usersGroup:Array as PropType<Array>,
     GroupName:String as PropType<String>,
     company:String as PropType<String>,   
     Headers:Array as PropType<Array<string>>         
}); 
 
const size = ref<'' | 'large' | 'small'>(''); 
interface ITemType{uid:string,users:string,textContent:string,mode:any,startTime:string,endTime:string,status:number|string}
type RemoveFn = (index:number|string ,item:ITemType) => void;
type CreateFn = () => void;
type ImportFn = (name:string) => void;
type StatuFn = (e:any,index:number)=>void;
type userFn = (e:any,index:number)=>void; 
// 模块
let mode = [
        {name:'项目1',w:'danger',test:'Top1'},
        {name:'项目2',w:'success',test:'Top2'},
        {name:'项目3',w:'warning',test:'Top3'},
        {name:'项目4',w:'info',test:'Top4'},
        {name:'其他项目',w:'',test:'Top5'},
]
// 用户列表
let users = ref(props.usersGroup)
// 状态 1 完成 0 未完成 2 进行中
let statuslist = {
       0:'未完成',
       1:'已完成',
       2:'进行中'
}
// 数据内容
const lists = ref<Array<ITemType>>([
     {
        uid:'AAAC1',  
        users:'大能啊',
        textContent:'摸鱼',
        mode:{name:'项目1',w:'danger',test:'Top1'},
        startTime:'2022/9/1',
        endTime:'2022/9/2',
        status:'未完成'  
     } 
]) 
// 移除
const removeItems:RemoveFn = (index)=>{ 
       if(lists.value.length<2){ 
          return false;
       }
       // 初始化进行类型收窄
       if(typeof index == 'number'){ 
          lists.value.splice(index,1); 
       }else{ 
          lists.value.splice(parseInt(index),1); 
       }  
}
// 重置
const resetFns = ()=>{ 
     lists.value.splice(1); 
}
// 添加
const CreateItem:CreateFn = ()=>{
      let obj:ITemType = {
           uid:`${Math.random()*10000}`,
           users:'user1',
           textContent:'aaa',
           mode:{name:'项目1',w:'danger',test:'Top1'},
           startTime:'2022/9/1',
           endTime:'2022/9/2',
           status:'未完成'  
      }
      lists.value.push(obj);
}
// 选择模块
const onSelectModeFn = (e,index)=>{
     lists.value[index].mode = e; 
}
// 状态选中
const onSelectStatus:StatuFn = (e,index)=>{ 
       
       lists.value[index].status = statuslist[e]; 
}
// 负责人选中
const onSelectFn:userFn = (e,index)=>{ 
       lists.value[index].users = e; 
}
// 导出+数据清洗
const ImportList:ImportFn = (name)=>{
        let userObjs = {};
        lists.value.forEach((item)=>{
             let valueArr = (Object.values(item)).splice(2);  
             if(userObjs[item.users]){
               userObjs[item.users].push(valueArr)
             }else{
               userObjs[item.users] = [valueArr]
             }  
        })
        clickjson(userObjs,name) 
       
}
// 导出配置
const clickjson = (arrs,names)=>{
     let endtoexcels = new endtoexcel({
         name:names ?? 'endtoexcel',
         infos:{company:props.company,group:props.GroupName,user:props.usersGroup[0]}, 
         author:props.usersGroup[0],
         theaders:props.Headers,
         tbodys:arrs 
         });
     endtoexcels.download();
 } 
defineExpose({
     ImportList
})  
// 动画 优化

</script>
<style lang="scss" scoped>

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
     .texts{
          display: inline-block;
          width: 50px;  
          &.active{
                color: #007fff;
          }
     }
     .el-dropdown-link{
           display: flex;
           align-items: center;
           .modetest{
               display: inline-block;
               width: 70px;
               color: #007fff;
           }
           &>p{
               display: inline-block;
               width: 50px;
               color: #007fff;
           }
     }
     .noClear{
          cursor:not-allowed;
     }
 .excel{
       width: 100%;
       height: 78vh;
       display: flex; 
       flex-direction: column;
       overflow: hidden;
       background: red; 
       .cellitem{
           border-left: 1px solid rgb(230, 230, 230);
           border-bottom: 1px solid rgb(230, 230, 230);
           font-size: .8rem;
           font-weight: bold;
           padding: .3rem .6rem;
           min-width: 200px;
           text-align: center;
           display: flex;
           align-items: center;
           justify-content: center;
           position: relative;
           &::before{
                         position: absolute;
                         left: 0;
                         bottom: -5px;
                         height: 5px;
                         width: 100%;
                         background: linear-gradient(to bottom,rgb(221, 221, 221),transparent);
                         content: '';
                     } 
           &>p{
               margin-right: .3rem;
           }
           
       }
       .usercell{
          width: 200px;
          border-left: 1px solid rgb(230, 230, 230);
          border-bottom: 1px solid rgb(230, 230, 230); 
          padding: .2rem; 
          // background: rgb(245, 244, 244)
       }
       .statucell{
                 @extend .usercell;
               //   width: 100px;
       }
       .textcell{
           @extend .usercell;
        
           box-sizing: border-box;
          //  textarea{
          //       width: 100%;
          //       height: 100%;
          //       border: none;
          //       outline-style: none;
          //       font-size: .8rem;
          //       color: #666;
          //       object-fit: fill;
          //       resize: none;
          //       padding: .2rem;
          //       box-sizing: border-box;
          //  }
       }
       .header_one{
            min-width: 3rem;
            position: sticky;
            left: 0;
            left: 0;
            z-index: 99;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            color: #333;
            border-bottom: 1px solid #ccc;
       }
       &_right{
          min-width: 80px;
          background: #fff; 
          padding: .5rem .2rem;
          .fits{
               width: 100%;
               display: flex;
               &>div{
                    padding: .2rem;
                    box-sizing: border-box;
                    button{
                         
                    }
               }
          }
       }
       &_left{
           flex: 1;
           background: #fff;
          
           border: 1px solid rgb(230, 230, 230);
           overflow: scroll; 
           &_layout{
                 width: 100%;
                 height: 100%;
                 display: flex;
                 flex-direction: column;  
                 &_header{
                      display: flex;
                      position: sticky;
                      top: 0;
                      z-index: 99;
                      background: #fff;
                      color: #666;
                      min-height: 45px;
                      //width: 950px;
                     
                 }
                 &_body{
                     
                      display: flex;
                      .orders{
                          width: 3rem; 
                          position: sticky;
                          left: 0;
                          z-index: 9; 
                         
                          cursor: pointer;
                          border-bottom: 1px solid rgb(230, 230, 230);
                          background: #fff;
                          &::before{
                               position: absolute;
                               right: -5px;
                               top: 0;
                               height: 100%;
                               width: 5px;
                               background: linear-gradient(to right,rgb(221, 221, 221),transparent);
                               content: '';
                          } 
                          
                          .temps{
                              overflow: hidden;
                              min-width: 3rem; 
                              height: 100%; 
                              &:hover{
                               &>div{
                                   transform: translateX(-3rem);
                               }
                          }
                              &>div{
                                   min-width: 3rem; 
                                   height: 100%; 
                                   position: relative;
                                   display: flex;
                                   transition: all .2s ease-in-out 0s;
                                   &>div{
                                        min-width: 3rem; ;
                                        height: 100%; 
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-size: .8rem;
                                   }
                              } 
                          }
                      }
                      .list{
                           display: flex;
                           flex-direction: column; 
                          .Listitems{
                                 display: flex;
                                 .item{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                 }
                          }
                      }
                 }
           }
        
       }
 }
</style>

 